<template>
  <div class="allSort-body">
    <backTo-view :child-msg="current"></backTo-view>
    <serachBox-view></serachBox-view>
    <div>
      <div class="title pl20">搜索 <span class="search-word">{{searchWord}}</span>的相关应用结果</div>
      <div class="content">
        <ul class="cf">
          <introduceList-view  :child-msg="item" v-for="item in dataList" :key="item.id"></introduceList-view>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import leftList from '../components/leftList.vue'
import introduceList from '../components/introduceList.vue'
import serachBox from '../components/serachBox.vue'
import backTo from '../components/backTo.vue'
export default {
  name: 'search',
  components: {
    'leftList-view': leftList,
    'introduceList-view': introduceList,
    'serachBox-view': serachBox,
    'backTo-view': backTo
  },
  data () {
    return {
      type: true,
      searchWord: '',
      current: '搜索结果',
      dataList: []
    }
  },
  watch: {
    '$route': 'routeChange'
  },
  methods: {
    backTo (id) {
      this.$router.go(-1)
      // this.$router.push({path: '/detail', query: {userId: id}})
    },
    toDetail (id) {
      this.$router.push({path: '/detail', query: {userId: id}})
    },
    routeChange () {
      let that = this
      let searchAPI = '/pc/search'
      this.searchWord = this.$route.query.text
      // 此地有传auth(token)认证 为空就不会执行
      this.$request.post(searchAPI, {'keyWord': this.searchWord, 'page': '1'}, true,
        function (res) {
          if (res.data.code === 1000) {
            that.dataList = res.data.rst
          }
        }
      )
    }
  },
  created () {
  },
  mounted () {
    let searchAPI = '/pc/search'
    let that = this
    this.searchWord = this.$route.query.text
    // 此地有传auth(token)认证 为空就不会执行
    this.$request.post(searchAPI, {'keyWord': this.searchWord, 'page': '1'}, true,
      function (res) {
        if (res.data.code === 1000) {
          that.dataList = res.data.rst
        }
      }
    )
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // 通过 `vm` 访问组件实例
      // console.log(vm)
    })
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  }
}
</script>
<style scoped>
  .title{
    font-size: 30px; /*px*/
    text-align: left;
    padding: 10px;
  }
  .search-word{
    color: rgba(0, 150, 136, 1);
  }
</style>
